<template>
    <div class="language">
        <van-nav-bar :title="$t('my.language')" :left-text="$t('common.cancle')" :right-text="$t('common.confirm')" @click-left="_return" @click-right="submit"></van-nav-bar>
        <van-cell-group class="languageMain">
            <van-cell @click="changeLanguage('zh')" title="简体中文">
                <van-icon slot="right-icon" v-if="active === 1" name="success" class="custom-icon" />
            </van-cell>
            <van-cell @click="changeLanguage('en')" title="English">
                <van-icon slot="right-icon" v-if="active === 2" name="success" class="custom-icon" />
            </van-cell>
            <van-cell @click="changeLanguage('koren')" title="韩语">
                <van-icon slot="right-icon" v-if="active === 3" name="success" class="custom-icon" />
            </van-cell>
            <van-cell @click="changeLanguage('japan')" title="日语">
                <van-icon slot="right-icon" v-if="active === 4" name="success" class="custom-icon" />
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script>
import store from '../../store'
    export default {
        data() {
            return {
                active:1,
            }
        },
        methods: {
            changeLanguage(lang){
                var that=this
                if(lang == 'zh'){
                    this.active = 1
                }else if(lang == 'en'){
                    this.active = 2
                }else if(lang == 'koren'){
                    this.active = 3
                }else if(lang == 'japan'){
                    this.active = 4
                }
                // lang == 'zh' ? this.active = 1 : this.active = 2
            },
            _return(){
                this.$emit('_return')
            },
            submit(){
                let area = this.$i18n.locale
                if(this.active === 1){
                    this.$i18n.locale = 'zh'
                    store.state.lan='zh'
                }else if(this.active === 2){
                    this.$i18n.locale = 'en'
                    store.state.lan='eh'
                }else if(this.active === 3){
                    this.$i18n.locale = 'koren'
                    store.state.lan='kr'
                } else if(this.active === 4){
                    this.$i18n.locale = 'japan'
                    store.state.lan='jp'
                }
                this._return()
            },
            getData(){
                let area = this.$i18n.locale
                area == 'zh' ? this.active = 1 : this.active = 2
            },
            logout(){
                localStorage.removeItem('user')
                localStorage.removeItem('token')
                this.$router.push('/login')
            }
        },
        created() {
            this.getData()
        },
        mounted() {
            this.$emit('disappear')
        },
    }
</script>

<style lang="stylus" scoped>
    font =#23ba92
    [class*=van-hairline]::after
        border none
    .van-cell:not(:last-child)::after
        border none
    .setMain
        width 96%
        margin 0 auto
        .van-cell
            color font
            border-bottom 1px solid rgba(255,255,255,0.1)
            .van-cell__right-icon
                color font
        .btn
            margin-top 20px
    .van-nav-bar
        .van-nav-bar__text
            color font
    .languageMain
        width 90%
        margin 0 auto
        .van-cell
            color font
            border-bottom 1px solid rgba(255,255,255,0.1)
            .van-cell__right-icon
                color font



</style>